<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style: none;
        }

        ul li {
            width: 100px;
            line-height: 35px;
            background-color: #ff0;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script src="./jquery-3.2.1.js"></script>
<script>
    let arr = [1, 2, 3, 4];

    //forEach forEach遍历数组，无返回值，不改变原数组，仅仅只是遍历
    arr.forEach((item, index, arr) => {
        console.log(item)
    })

    //map map遍历数组，返回一个新数组，不改变原数组的值
    arr.map((item, index, arr) => {
        return item * 10
    })

    //filter过滤掉数组中不满足条件的值，返回一个新数组，不改变原数组的值。
    arr.filter((item, index, arr) => {
        return item > 2 //新数组为[3,4]
    })

    //some 遍历数组每一项，有一项返回true,则停止遍历，结果返回true。不改变原数组
    arr.some((item, index, arr) => {
        return item > 2
    })

    //every 遍历数组每一项，每一项返回true,则最终结果为true。当任何一项返回false时，停止遍历，返回false。不改变原数组
    arr.every((item, index, arr) => {
        return item > 2
    })

    //数组的扩展
    // Array.from 常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组
    let lis = Array.from($('ul li'));
    lis.forEach((item, index, lis) => {
        $(item).click(() => {
            console.log(index)
        })
    })

</script>
</body>
</html>